<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html>
<head>
<script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="js/plugin/jquery-ui-1.8.12.custom.min.js"
	type="text/javascript"></script>
<script src="js/plugin/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
<script src="js/plugin/jquery.validate.min.js" type="text/javascript"></script>
<script src="js/plugin/jquery.fileupload.js" type="text/javascript"></script>
<script src="js/plugin/jquery.fileupload-ui.js" type="text/javascript"></script>
<script src="js/plugin/jquery.multiselect2side.js"
	type="text/javascript"></script>
<script src="js/eslserver-common.js" type="text/javascript"></script>
<script src="js/eslserver-dialogObj.js" type="text/javascript"></script>
<script src="js/eslserver-fileupload.js" type="text/javascript"></script>
<link href="css/jquery/jquery.ui.all.css" rel="stylesheet"></link>
<link href="css/jquery/jquery.ui.dialog.css" rel="stylesheet"></link>
<link href="css/eslserver-main.css" rel="stylesheet"></link>
<link href="css/jquery/jquery.multiselect2side.css" rel="stylesheet"></link>

<title>Manage Group</title>

<script>
    var groupID = getFromAttribute(${groupID});
    if(!groupID) {
    	groupID = getFromAttribute(${param.groupID});
    }
    
    $(document).ready(function() {
		$("#container").addClass("ui-widget");

		$("#groupID").attr("value", groupID);
		
		$("#resetActButn").click(function() {
			$("#updateActButn").attr("disabled", true);
			$("#addActButn").removeAttr("disabled");

		});
		
		loadGroupInfoForm();
				
		$("#backToMain").attr("value", "Back to Main");
		$("#backToMain").click(function(evt) {
			evt.preventDefault();
			window.top.location.href = "MainDashboard.jsp?tabID=1";
		});
		
		
		$.validator.addMethod("IP4Checker", function(value) {
            var ip = "^((0|1[0-9]{0,2}|2[0-9]{0,1}|2[0-4][0-9]|25[0-5]|[3-9][0-9]{0,1})\\.){3}(0|1[0-9]{0,2}|2[0-9]{0,1}|2[0-4][0-9]|25[0-5]|[3-9][0-9]{0,1})$";
                return value.match(ip);
        }, "Invalid IP address");

        $("#main").validate({
            rules: {
            	
            	coordinatorName: {
            		 required: true,     
            	},
            	
            	coordinatorIP: {
                    required: true,
                    IP4Checker: true
                },
            	
            	coordinatorPort: {
                    required: true,
                    digits: true,
                    min: 1
                }
            }
        });
		
	});
	
	function loadGroupInfoForm() {
		var eslID = 0;
		debugger;
		if(!groupID){
			$("#updateActButn").hide();
			
			$("#addActButn").click(function() {
				$("#main").attr("action", "/eslserver/AddGroup.do");
				$("#main").attr("method", "post");
				$("#main").submit();
			});
		} else {

			$.getJSON("/eslserver/LoadGroupInfo.do?groupID=" + groupID, function(data) {
				$("#groupID").val(data.groupID);
				$("#groupName").val(data.name);
				$("#groupDescription").val(data.description);			
			})
			
			$("#addActButn").hide();
			
			$("#updateActButn").click(function() {
				$("#main").attr("action", "/eslserver/AddGroup.do");
				$("#main").attr("method", "post");
				$("#SelectESLms2side__dx option").each(function() {  
				    $(this).attr("selected", "selected");  
				});
				$("#main").submit();
			});
		}

		$.getJSON("/eslserver/GroupESLDropdown.do?groupID=" + groupID, function(
				dropdowndata) {
			$('#SelectESL').multiselect2side({'search': 'Search: '});
			$.each(dropdowndata[0], function(val, text) {
				
				$('#SelectESL').multiselect2side('addOption', {name: text, value: val, selected: true});
			});
			$.each(dropdowndata[1], function(val, text) {
				
				$('#SelectESL').multiselect2side('addOption', {name: text, value: val, selected: false});
			});			

		});	
/*		
		$.getJSON("/eslserver/GroupESLDropdown.do", function(
				dropdowndata) {
			setdropdown(dropdowndata, "#SelectESLms2side__sx", eslID);
		});		
		
		$.getJSON("/eslserver/GroupESLDropdown.do?groupID=" + groupID, function(
				dropdowndata) {
			setdropdown(dropdowndata, "#SelectESLms2side__dx", eslID);
		});		
*/		
	}

	
</script>
</head>
<body id="container">
	<fieldset class="mainFieldSet talentForm">
		<legend class="mainLegend">Group Info</legend>
		<form id="main" accept-charset="UTF-8">
			<table>
				<tr style="display: none">
					<td>Group ID</td>
					<td><input type="text" id="groupID" name="groupID" size="30" />
				</tr>
				<tr>
					<td>Group Name<em> *</em>
					</td>
					<td><input id="groupName" name="groupName" type="text"
						size="30" /></td>
				</tr>
				<tr>
					<td>Select ESLs</td>
				</tr>
				<tr>
					<td colspan="2"><select name="SelectESL" id="SelectESL"
						multiple="multiple"></select>
					</td>
				</tr>
				<tr>
					<td>Description</td>
					<td><textarea id="groupDescription" name="groupDescription"
							rows="3" cols="50" class="expand100-200"></textarea>
					</td>
				</tr>
				<tr>
					<td colspan="2"><input id="addActButn" type="button"
						value="ADD" /> <input id="updateActButn" name="updateActButn"
						type="button" value="UPDATE" /> <input id="resetActButn"
						name="resetActButn" type="reset" value="RESET" />
					</td>
				</tr>

			</table>
		</form>
	</fieldset>
	<br />

	<div>
		<input type=button id="backToMain" />
	</div>

</body>